<hz-page-header header="{$ 'Queues' | translate $}"></hz-page-header>

<table ng-controller="horizon.dashboard.project.queues.table.queueController as table"
  hz-table ng-cloak
  st-table="table.queues"
  st-safe-src="table.queuesSrc"
  default-sort="name"
  default-sort-reverse="false"
  class="table table-striped table-rsp table-detail">

  <thead>

    <tr>
      <!--
        Table-batch-actions:
        This is where batch actions like searching, creating, and deleting.
      -->
      <th colspan="100" class="search-header">
        <hz-search-bar group-classes="input-group" icon-classes="fa-search">
          <actions allowed="table.resourceType.batchActions" type="batch">
          </actions>
        </hz-search-bar>
      </th>
    </tr>

    <!--
      Table-column-headers:
      The headers for the table columns
    -->
    <tr>
      <th class="multi_select_column">
        <input type="checkbox" hz-select-all="table.queues">
      </th>
      <th class="expander"></th>
      <th class="rsp-p1" st-sort="name" st-sort-default translate>Name</th>
      <th class="rsp-p1" st-sort="claimed" translate>Claimed Messages</th>
      <th class="rsp-p2" st-sort="free" translate>Free Messages</th>
      <th class="rsp-p1" st-sort="total" translate>Total Messages</th>
      <th class="actions_column" translate>Actions</th>
    </tr>
  </thead>
  <tbody>

    <!--
      Table-rows:
      This is where we declaratively define the table columns.
      Include select-col if you want to select all.
      Include expander if you want to inline details.
      Include action-col if you want to perform actions.
      rsp-p1 rsp-p2 are responsive priority as user resizes window.
    -->
    <tr ng-repeat-start="q in table.queues track by q.id">

      <td class="multi_select_column">
        <input type="checkbox"
          ng-model="tCtrl.selections[q.id].checked"
          hz-select="q">
      </td>

      <td class="expander">
        <span class="fa fa-chevron-right"
          hz-expand-detail item="q" duration="200"></span>
      </td>

      <td class="rsp-p1">{$ q.name $}</td>
      <td class="rsp-p1">{$ q.claimed $}</td>
      <td class="rsp-p2">{$ q.free $}</td>
      <td class="rsp-p1">{$ q.total $}</td>
      <td class="actions_column">
        <!--
          Table-row-action-column:
          Actions taken here applies to a single item/row.
        -->
        <actions allowed="table.resourceType.itemActions" type="row" item="q"></actions>
      </td>
    </tr>
    <tr ng-repeat-end class="detail-row">

      <!--
        Table-row-details:
        Provides detail view of specific view, with more information than can be
        displayed in the table alone.
      -->
      <td class="detail" colspan="100">
        <!--
          The responsive columns that disappear typically should reappear here
          with the same responsive priority that they disappear.
          E.g. table header with rsp-p2 should be here with rsp-alt-p2
          The layout should minimize vertical space to reduce scrolling.
        -->

        <div class="row">
          <!-- Important metadata should go here and table header.
            It will appear in the table above if there is room, otherwise
            it will appear in the drawer when user resizes the window.
          -->
          <span class="rsp-alt-p2">
            <dl class="col-sm-12">
              <dt translate>Free Messages</dt>
              <dd>{$ q.free $}</dd>
            </dl>
          </span>
        </div>
        <div class="row">
          <!-- additional unimportant metadata can be place here -->
          <dl class="col-sm-3" ng-repeat="(key, value) in q.metadata">
            <dt>{$ key $}</dt>
            <dd>{$ value $}</dd>
          </dl>
        </div>
        <ng-include src="table.subsTemplate"></ng-include>
        <ng-include src="table.msgsTemplate"></ng-include>
      </td>
    </tr>

    <tr hz-no-items items="table.queues"></tr>
  </tbody>

  <tfoot hz-table-footer items="table.queues"></tfoot>
</table>
